<template>
	<view class="body">
		<myHead :title="title" />
		<scroll-view scroll-y="true" class="scroll-Y" style="height: 100%;">
		 <uni-forms :value="meeting" ref="form" label-position="top">
		            <uni-forms-item label="创建人" posion="top" >
						<span class="text">{{meeting.createUser}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="会议名称" posion="top" >
						<span class="text">{{meeting.meetingName}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="会议主题">
						<span class="text">{{meeting.meetingTheme}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="会议时间">
						<span class="text">{{meeting.createTime}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="会议地点">
						<span class="text">{{meeting.meetingRoom}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="截至时间">
						<span style="display: block;">{{meeting.createTime}}——{{meeting.endTime}}</span>
		            </uni-forms-item>
					
					<uni-forms-item label="会议文件" >
						<uni-grid :column="5" :showBorder="false"  :square="false">
						    <uni-grid-item  v-for="(file,file_index) in meeting.files" :key="file_index">
						       <image v-if="file.isimg" :src="file.url"
								mode=""></image>
						       <image v-else :src="'../../../static/party_building/assets/fileType/'+file.suffix"
						        mode=""></image>
								<p   @tap.stop="$api(file.url)">{{file.fileName}}</p>
						</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
		        </uni-forms>
				<!-- 任务 -->
				<uni-collapse>
				    <uni-collapse-item   v-for="(item,key) in task" :title="item.title" >
				        <view style="padding: 30rpx;">
				          <uni-card :title="item.title" :note="item.address" :is-shadow="true"
				          	:extra="item.extra">
				          			<uni-steps activeColor="#e20909" :options="item.pop" direction="column"
				          				:active="item.active">
										</uni-steps>
										<!-- 设置评分数 -->
										<uni-rate :max="5" v-if="item.taskStatus>=4" :value="item.monitorScore" :readonly="true" :size="12" class="first"/>
										<uni-rate :max="5" v-if="item.monitorUserScore>=5"  :value="item.monitorUserScore" :readonly="true" :size="12" class="second"/>
										<!-- 执行人 -->
										<uni-grid :column="5" class="photos1" :showBorder="false"  :square="false" @change="loadImg(img1)">
										    <uni-grid-item v-for="(files,index) in item.exe_files" :key="index">
										       <image :src="files.url"
												mode=""></image>					 
										    </uni-grid-item> 
										</uni-grid>
										<!-- 监督人 -->
										<uni-grid :column="5" class="photos2" :showBorder="false"  :square="false" @change="loadImg(img1)">
										    <uni-grid-item v-for="(files,index) in item.moni_files" :key="index" >
										       <image  :src="files.url"
												mode=""></image>					 
										    </uni-grid-item> 
										</uni-grid>
				          </uni-card>
				        </view>
				    </uni-collapse-item>
				</uni-collapse>
				</scroll-view>
	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import {getMeetingDetail} from '../../../api/api_party_meeting.js'
	export default {
		name: "child",
		props: {
			meetingId: { 
			   type: Number,
			   default: 1,
			}
		},
		data() {
			return {
			title: "详情",
				meeting:{
				},
				task:[
					// {
					// 	address:"任务分数：5",
					// 	extra:'extra',
					// 	title: '房屋打扫',
					// 	createUser:'张三',
					// 	pop: [{
					// 			title: '组长发起创建任务',
					// 			desc:'2020-02-02'
					// 		},
					// 		{
					// 			title: '执行任务中',
					// 			desc: '执行人：李四'
					// 		},
					// 		{
					// 			title: '任务完成',
					// 			desc: '2020-05-05'
					// 		},
					// 		{
					// 			title: '督察人员督察任务',
					// 			desc: '督察人：城池'
					// 		},
					// 		{
					// 			title: '督查组督察审批',
					// 			desc: '2018-11-12'
					// 		},
					// 	],
					// 	active:1,//步骤
					// },
				],
				
			}
		},
		components: {
			myHead: myHeader,
		},
		mounted() {
			let _this = this 
			console.log(this.meetingId)
			getMeetingDetail({'meetingId':this.meetingId}).then(res=>{
				_this.meeting = res
				uni.showToast({
					title:res
				})
				_this.meeting.files = []
				//包装文件
				_this.meeting.meetingFile.forEach(file=>{
					let suffix = '';
					switch(file.suffix){
						case ".doc":
						case ".docx":
							suffix = 'word.png';
							break;
						case ".pdf":
							suffix = 'pdf.png';
							break;
						case ".excel":
							suffix = 'excel.png';
							break;
						default :
							suffix = 'otherFile.png'
					}
					_this.meeting.files.push({
						fileName:file.fileName,
						isimg:file.fileType==='img',
						url:file.url.replace('http://112.124.6.140:8090','/api'),
						suffix,
					})
				})
				console.log(_this.meeting)
				//任务
				res.tasks.forEach(task=>{//任务
					let files = []
					 // _this.task.files.forEach(file=>{//任务文件
					 // 	files.push(file)
					 // })
					let exe_files = task.files.map(file=>{//任务文件
						return file.fileType ===0
					})
					let moni_files = task.files.map(file=>{//任务文件
						return file.fileType === 1
					})
					let score = task.monitorScore===null?task.taskScore:task.monitorScore
					_this.task.push(
					{	moni_files,exe_files,
						address:"任务分数："+score,
						extra:task.executorUser,
						title: task.taskName,
						createUser:_this.meeting.createUser,
						moni_sore:task.monitorScore,
						pop: [{
								title: '组长发起创建任务',
								desc:task.taskCreateTime//0
							},
							{
								title: '任务审批',
								desc: _this.meeting.updateTime//1
							},
							{
								title: '执行任务:'+task.executorUser+' '+task.executorUserPhone,
								desc: task.updateTime//2
							},
							{
								title: '督察进行中',
								desc: '督察人：'+task.monitorUser+" "+task.monitorUserPhone
							},
							{
								title: '督察通过',
								desc: '督察分数：'+task.monitorScore//4
							},
							{
								title: '督查组督察审批结束',
								desc: task.monitorLead+' '+task.monitorLeadPhone
							},
						],
						active:task.taskStatus,//步骤
					})
					console.log(_this.task)
				})
				    
			})
		},
		methods: {
			  downloadFile(url){
			          const iframe = document.createElement("iframe");
			          iframe.style.display = "none";  // 防止影响页面
			          iframe.style.height = 0;  // 防止影响页面
			          iframe.src = url;
			          document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
			          // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
			          setTimeout(()=>{
			            iframe.remove();
			          }, 5 * 60 * 1000);
			        },
				download(url) {
					console.log(url)
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (e) => {
							if (e.statusCode === 200) {
								let tempFilePaths = e.tempFilePath;
								console.log('地址', tempFilePaths)
								/*注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。*/
								// uni.saveFile({
								// 	tempFilePath: tempFilePaths,
								// 	complete: (res) => {
								// 		var savedFilePath = res.savedFilePath;
								// 		console.log(savedFilePath);
								// 		uni.showToast({
								// 			title: '保存成功',
								// 			icon: 'none'
								// 		})
								// 	}
								// });
							}
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						},
					});
				},
			loadImg(arr){
				console.log(11111)
				uni.previewImage({
				            urls: arr,
				            longPressActions: {
				                itemList: ['发送给朋友', '保存图片', '收藏'],
				                fail: function(err) {
				                  uni.showToast({
				                  	title:'图片加载出错',
									duration:2000,
									icon:'none'
				                  })
				                }
				            }
				        });
			}
		},
	}
</script>
<style lang="scss" scoped>
	
	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
	  background: linear-gradient(180deg, #ff5e59, #e20909);
	  color: #fff;
	}
	.body{
		height: 100%;
		background-color:#f1f1f1 ;
		/deep/ .uni-forms{
			padding-bottom: 12px;
			.uni-forms-item{
				padding: 0 12px;
				background-color: #FFFFFF;
				.uni-forms-item__content{
					.uni-grid-wrap{
						.uni-grid{
							.uni-grid-item{
								// margin: 0 2.5px;
								width: auto!important;
								margin: 0 0.5%;
								p{
									font-size: 12px;
									width: 120upx;
									position: absolute;
									top: 70%;
									background-color: rgba(0,0,0,0.4);
									color: #FFF;
									overflow:hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									-o-text-overflow:ellipsis;
									
								}
								.uni-grid-item__box{
									border: 1px #e5e5e5 solid;
								}
								uni-image{
									max-width: 120upx;
									max-height: 120upx;
								}
							}
						}
					}
				}
				.uni-forms-item__label{
					.label-text{
					>span{
						font-size: 14px;
						color: #999999;
					}	
					}
				}
				.uni-forms-item__inner{
					padding-bottom: 0px;
				}
			}
		}
		/deep/ .uni-collapse{
			.uni-card{
				margin: 0px;
				.first{
					position: absolute;
					top: 65.5%;
					left: 300upx;
				}
				.second{
					position: absolute;
					bottom: 17.5%;
					left: 300upx;
				}
				.photos1{
					position: absolute;
					top: 33%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
				.photos2{
					position: absolute;
					top: 60%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
			}
		.uni-grid-wrap{
				width: 40%;
			.uni-grid-item{
				width: 20% !important;
				uni-image{
					width: 50upx;
					height: 50upx;
				}
			}
		}
		
		}
	}
</style>
